<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <div class="ax_default1" @click="notice">
          <img src="@/assets/images/p1.png" alt="" />
          <p>通知</p>
          <p>5条未读</p>
        </div>
        <div class="ax_default2" @click="info">
          <img src="@/assets/images/p2.png" alt="" />
          <p>信息</p>
          <p>5条未读</p>
        </div>
        <div class="ax_default3">
          <img src="@/assets/images/p2.png" alt="" />
          <p>AQI指数</p>
          <p>34</p>
          <p>优</p>
        </div>
        <div class="ax_default4" @click="large">
          <img src="@/assets/images/p4.png" alt="" />
          <p>我的驾驶舱</p>
          <p>132个项目</p>
          <p>点击进入决策驾驶舱</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px" class="el-col1">
        <div class="ax_input1">
          <img src="@/assets/images/旋转箭头_u17.svg" alt="" />
          <el-input
            v-model="input"
            placeholder="项目名称/编号"
            @input="showIcon = !!input"
          ></el-input>
          <img
            src="@/assets/images/重置_u18.svg"
            alt=""
            @click="clearInput"
            v-show="showIcon"
          />
        </div>
        <div class="ax_input2">
          <img src="@/assets/images/旋转箭头_u17.svg" alt="" />
          <el-select
            v-model="valueplus"
            placeholder="项目管理员"
            @change="handleSelectChange1"
          >
            <el-option
              v-for="item in optionsplus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <img
            src="@/assets/images/重置_u18.svg"
            alt=""
            @click="clearInput1"
            v-show="showIcon1"
          />
          <div class="line"></div>
        </div>
        <div class="ax_input3">
          <img src="@/assets/images/旋转箭头_u17.svg" alt="" />
          <el-select
            v-model="value"
            placeholder="项目状态"
            @change="handleSelectChange3"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <img
            src="@/assets/images/重置_u18.svg"
            alt=""
            @click="clearInput3"
            v-show="showIcon3"
          />
          <div class="line"></div>
        </div>
        <div class="ax_input4">
          <img src="@/assets/images/旋转箭头_u17.svg" alt="" />
          <el-select
            v-model="value1"
            placeholder="审核状态"
            @change="handleSelectChange4"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <img
            src="@/assets/images/重置_u18.svg"
            alt=""
            @click="clearInput4"
            v-show="showIcon4"
          />
          <div class="line"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px" class="el-col2">
        <el-card
          class="card"
          v-for="(project, index) in tableList"
          :key="index"
        >
          <div class="u1" @click="u1Clcik">{{ project.Project }}</div>
          <div class="u2">
            <p>基础信息完成度</p>
            <p>70%</p>
          </div>
          <div class="u2">
            <p>道路数量</p>
            <p>{{ project.roads }}</p>
          </div>
          <div class="u2">
            <p>道路总里程km</p>
            <p>{{ project.mileage }}</p>
          </div>
          <div class="u2">
            <p>计划投资总额</p>
            <p>{{ project.money }}</p>
          </div>
          <div class="u2">
            <p>计划建安投资总额</p>
            <p></p>
          </div>
          <div class="u2">
            <p>计划开工时间</p>
            <!-- <p>{{ project.startDate }}</p> -->
            <p>{{ formatDate(project.startDate) }}</p>
          </div>
          <div class="u2">
            <p>计划竣工时间</p>
            <!-- <p>{{ project.endDate }}</p> -->
            <p>{{ formatDate(project.endDate) }}</p>
          </div>
          <div class="u2">
            <p>项目阶段</p>
            <p>未开始</p>
          </div>
          <div class="u2">
            <p>完成进度</p>
            <p>70%</p>
          </div>
          <div class="u2">
            <p>项目管理员</p>
            <p>{{ project.administrator }}</p>
          </div>
        </el-card>
        <el-button class="btn" @click="dialogVisible = true"
          >+新增项目</el-button
        >
        <el-dialog
          title="创建项目"
          :visible.sync="dialogVisible"
          :before-close="handleClose"
          :show-close="false"
        >
          <el-form :inline="true" :model="formData">
            <el-form-item label="项目名称">
              <el-input
                placeholder="输入项目名称"
                v-model="formData.Project"
              ></el-input>
            </el-form-item>
            <el-form-item label="道路数量">
              <el-input
                placeholder="输入道路数量"
                v-model="formData.roads"
              ></el-input>
            </el-form-item>
            <el-form-item label="道路总里程">
              <el-input
                placeholder="输入道路总里程"
                v-model="formData.mileage"
              ></el-input>
            </el-form-item>
            <el-form-item label="计划开始时间">
              <el-date-picker
                v-model="formData.startDate"
                type="date"
                placeholder="年/月/日"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="计划结束时间">
              <el-date-picker
                v-model="formData.endDate"
                type="date"
                placeholder="年/月/日"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="计划投资总金额">
              <el-input
                placeholder="单位“万”仅支持输入数字"
                v-model="formData.money"
              ></el-input>
            </el-form-item>
            <el-form-item label="立项单位名称">
              <el-input
                placeholder="请选择立项单位名称"
                v-model="formData.unit"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人">
              <el-input
                placeholder="选择负责人"
                v-model="formData.head"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input
                placeholder="请选择联系方式"
                v-model="formData.phone"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目管理员">
              <img src="@/assets/images/旋转箭头_u17.svg" alt="" />
              <el-input
                placeholder="输入项目管理员"
                v-model="formData.administrator"
              ></el-input>
              <div class="line"></div>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleConfirm">提交</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
    <el-divider />
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "4.8.1",
      options: [
        {
          value: "选项1",
          label: "待开始",
        },
        {
          value: "选项2",
          label: "已开始",
        },
        {
          value: "选项3",
          label: "已结束",
        },
      ],
      value: "",
      options1: [
        {
          value: "选项1",
          label: "待审核",
        },
        {
          value: "选项2",
          label: "通过",
        },
        {
          value: "选项3",
          label: "驳回",
        },
      ],
      value1: "",
      optionsplus: [
        {
          // value: "选项1",
          // label: "李梅里",
          // phone: "156445985662",
          // gender: "女",
          // photoUrl:""
        },
      ],
      valueplus: "",
      input: "",
      dialogVisible: false,
      showIcon: false,
      showIcon1: false,
      showIcon3: false,
      showIcon4: false,
      formData: {
        Project: "",
        roads: "",
        mileage: "",
        money: "",
        unit: "",
        head: "",
        phone: "",
        administrator: "",
        startDate: "",
        endDate: "",
      },
      tableList: [], // 用于存储项目的数组
    };
  },
  methods: {
    //输入框1
    clearInput() {
      this.input = "";
      this.showIcon = false;
    },
    //输入框2
    clearInput1() {
      this.valueplus = "";
      this.showIcon1 = false;
    },
    handleSelectChange1() {
      this.showIcon1 = true;
    },
    //输入框3
    clearInput3() {
      this.value = "";
      this.showIcon3 = false;
    },
    handleSelectChange3() {
      this.showIcon3 = true;
    },
    //输入框4
    clearInput4() {
      this.value1 = "";
      this.showIcon4 = false;
    },
    handleSelectChange4() {
      this.showIcon4 = true;
    },
    //弹出框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleConfirm() {
      this.tableList.push({
        Project: this.formData.Project,
        roads: this.formData.roads,
        mileage: this.formData.mileage,
        money: this.formData.money,
        unit: this.formData.unit,
        head: this.formData.head,
        phone: this.formData.phone,
        administrator: this.formData.administrator,
        startDate: this.formData.startDate,
        endDate: this.formData.endDate,
      });
      this.dialogVisible = false;
    },
    //日期转换
    formatDate(date) {
      if (date) {
        const year = date.getFullYear();
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const day = ("0" + date.getDate()).slice(-2);
        return `${year}-${month}-${day}`;
      }
      return ""; // 如果日期是 null 或 undefined，则返回空字符串
    },
    //u1Clcik点击
    u1Clcik() {
      // console.log(111);
      this.$router.push("/collaborativeManagement");
    },
    //大屏跳转
    large() {
      console.log(111);
      this.$router.push("/large");
    },
    //通知
    notice() {
      console.log(111);
      this.$router.push("/notice");
    },
    //信息
    info() {
      this.$router.push("/info");
    },
  },
};
</script>
<style>
.el-select .el-input__inner:focus {
  border-color: #ffffff;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ffffff;
}
.el-select__caret {
  display: none;
}
</style>
<style scoped lang="scss">
.app-container {
  .el-col {
    display: flex;
    margin-bottom: 10px;
    .ax_default1 {
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      img {
        width: 300px;
        height: 100px;
      }
      > p:nth-of-type(1) {
        position: absolute;
        top: 10px;
        left: 80px;
        font-weight: 650;
        color: #a36717;
      }
      > p:nth-of-type(2) {
        position: absolute;
        top: 34px;
        left: 80px;
        font-weight: 400;
        color: #a36717;
      }
    }
    .ax_default2 {
      cursor: pointer;
      margin-right: 10px;
      position: relative;
      img {
        width: 300px;
        height: 100px;
      }
      > p:nth-of-type(1) {
        position: absolute;
        top: 10px;
        left: 90px;
        font-weight: 650;
        color: #03a113;
      }
      > p:nth-of-type(2) {
        position: absolute;
        top: 34px;
        left: 90px;
        font-weight: 400;
        color: #03a113;
      }
    }
    .ax_default3 {
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      img {
        width: 300px;
        height: 100px;
      }
      > p:nth-of-type(1) {
        position: absolute;
        top: 10px;
        left: 90px;
        font-weight: 650;
        color: #03a113;
      }
      > p:nth-of-type(2) {
        position: absolute;
        top: 34px;
        left: 90px;
        font-weight: 400;
        color: #03a113;
      }
      > p:nth-of-type(3) {
        position: absolute;
        top: 31px;
        left: 120px;
        font-weight: 400;
        color: #03a113;
      }
    }
    .ax_default4 {
      position: relative;
      cursor: pointer;
      img {
        width: 614px;
        height: 100px;
      }
      > p:nth-of-type(1) {
        position: absolute;
        top: 10px;
        left: 76px;
        font-weight: 650;
        color: #ffffff;
      }
      > p:nth-of-type(2) {
        position: absolute;
        top: 34px;
        left: 76px;
        font-weight: 400;
        color: #ffffff;
      }
      > p:nth-of-type(3) {
        position: absolute;
        top: 38px;
        left: 157px;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
  .el-col1 {
    display: flex;
    margin-bottom: 10px;
    .ax_input1 {
      position: relative;
      margin-right: 10px;
      ::v-deep .el-input__inner {
        width: 300px !important;
        height: 44px;
        border-width: 1px;
        border-radius: 10px;
        padding-left: 36px;
      }
      img:nth-of-type(1) {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 1;
      }
      img:nth-of-type(2) {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 1;
        cursor: pointer;
      }
    }
    .ax_input2 {
      margin-right: 10px;
      position: relative;
      ::v-deep .el-input__inner {
        width: 300px !important;
        height: 44px;
        border-width: 1px;
        border-radius: 10px;
        padding-left: 36px;
      }
      img:nth-of-type(1) {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 1;
      }
      img:nth-of-type(2) {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 1;
        cursor: pointer;
      }
      .line {
        border-bottom: 1px solid red;
        width: 240px;
        margin-left: 30px;
      }
    }
    .ax_input3 {
      margin-right: 10px;
      position: relative;
      ::v-deep .el-input__inner {
        width: 300px !important;
        height: 44px;
        border-width: 1px;
        border-radius: 10px;
        padding-left: 36px;
      }
      img:nth-of-type(1) {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 1;
      }
      img:nth-of-type(2) {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 1;
        cursor: pointer;
      }
      .line {
        border-bottom: 1px solid red;
        width: 240px;
        margin-left: 30px;
      }
    }
    .ax_input4 {
      position: relative;
      ::v-deep .el-input__inner {
        width: 300px !important;
        height: 44px;
        border-width: 1px;
        border-radius: 10px;
        padding-left: 36px;
      }
      img:nth-of-type(1) {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 1;
      }
      img:nth-of-type(2) {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 1;
        cursor: pointer;
      }
      .line {
        border-bottom: 1px solid red;
        width: 240px;
        margin-left: 30px;
      }
    }
  }
  .el-col2 {
    // display: flex;
    display: -webkit-box;
    .card {
      width: 300px;
      height: 345px;
      border: none;
      font-size: 16px;
      // color: rgba(102, 82, 255, 0.8980392156862745);
      margin-right: 12px;
      .u1 {
        font-weight: 650;
        font-size: 16px;
        color: #333333;
        cursor: pointer;
      }
      .u2 {
        display: flex;
        justify-content: space-between;
        margin-bottom: -24px;
        cursor: pointer;
      }
    }
    .btn {
      width: 300px;
      height: 345px;
      border: none;
      font-size: 16px;
      color: rgba(102, 82, 255, 0.8980392156862745);
    }
    ::v-deep .el-dialog {
      width: 1101px;
      height: 610px;
      border-width: 0px;
      background-color: rgba(246, 249, 251, 1);
      border-radius: 20px;
      .el-dialog__title {
        display: flex;
        justify-content: center;
        color: #333333;
        font-size: 30px;
        font-weight: 600;
        margin-top: 20px;
      }
      .el-dialog__footer {
        position: relative;
        > span {
          display: flex;
          justify-content: center;
          //   position: absolute;
          //   left: 75px;
          //   top: -20px;
          > button:nth-of-type(1) {
            position: absolute;
            // width: 140px;
            width: 633px;
            height: 50px;
            border-radius: 10px;
          }
          > button:nth-of-type(2) {
            position: absolute;
            // width: 140px;
            // height: 50px;
            width: 83px;
            height: 36px;
            border-radius: 10px;
            right: 20px;
            bottom: 480px;
          }
        }
      }
      .el-form {
        margin-left: 60px;
        .el-form-item__label {
          margin-left: 8px;
          margin-top: -10px;
        }
        .el-form-item:nth-of-type(10) {
          position: relative;
          .el-input__inner {
            padding-left: 36px;
          }
          img {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 1;
          }
          .line {
            border-bottom: 1px solid red;
            width: 240px;
            margin-left: 30px;
          }
        }
        .el-form-item {
          width: 310px;
          .el-input__inner {
            width: 300px;
            height: 44px;
            border-radius: 10px;
          }
        }
      }
    }
  }
}
</style>
